<template>
  <div class="login-layout">
    <div class="login-bg">
      <div class="welcome-text">欢迎来到招聘市场需求智能感知系统</div>
    </div>
    <div class="login-form-area">
      <el-card class="login-card">
        <template #header>
          <div class="card-header">
            <el-tabs v-model="activeTab">
              <el-tab-pane label="登录" name="login"></el-tab-pane>
              <el-tab-pane label="注册" name="register"></el-tab-pane>
            </el-tabs>
          </div>
        </template>
        
        <!-- 登录表单 -->
        <el-form v-if="activeTab === 'login'" :model="loginForm" :rules="loginRules" ref="loginFormRef">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="用户名">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin" style="width: 100%">登录</el-button>
          </el-form-item>
        </el-form>

        <!-- 注册表单 -->
        <el-form v-else :model="registerForm" :rules="registerRules" ref="registerFormRef">
          <el-form-item prop="username">
            <el-input v-model="registerForm.username" placeholder="用户名">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="registerForm.password" type="password" placeholder="密码">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model="registerForm.email" placeholder="邮箱">
              <template #prefix>
                <el-icon><Message /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleRegister" style="width: 100%">注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { User, Lock, Message } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const activeTab = ref('login')
const loginFormRef = ref(null)
const registerFormRef = ref(null)
const router = useRouter()

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: ''
})

// 注册表单数据
const registerForm = reactive({
  username: '',
  password: '',
  email: ''
})

// 表单验证规则
const loginRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const registerRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ]
}

// 处理登录
const handleLogin = async () => {
  if (!loginFormRef.value) return
  //router.push('/home')
  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const response = await axios.post('http://localhost:8081/api/user/login', loginForm)
        if (response.data.code === 200) {
          // 保存用户ID到localStorage
          localStorage.setItem('userId', response.data.data.id)
          ElMessage.success(response.data.message)
          router.push('/home')
        } else {
          ElMessage.error(response.data.message)
        }
      } catch (error) {
        ElMessage.error('登录失败，请稍后重试')
      }
    }
  })
}

// 处理注册
const handleRegister = async () => {
  if (!registerFormRef.value) return
  await registerFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const response = await axios.post('http://localhost:8081/api/user/register', registerForm)
        if (response.data.code === 200) {
          ElMessage.success(response.data.message)
          activeTab.value = 'login' // 注册成功后切换到登录页
        } else {
          ElMessage.error(response.data.message)
        }
      } catch (error) {
        ElMessage.error('注册失败，请稍后重试')
      }
    }
  })
}
</script>

<style scoped>
.login-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.login-bg {
  flex: 6;
  position: relative;
  background: linear-gradient(135deg, #232526 0%, #414345 100%);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.45),
    0 6px 20px rgba(0,0,0,0.35),
    2px 2px 0 #232526,
    4px 4px 12px rgba(65,67,69,0.25);
  letter-spacing: 2px;
  text-align: center;
  width: 80%;
  line-height: 1.3;
  pointer-events: none;
}

.login-form-area {
  flex: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  min-width: 0;
  box-shadow: -8px 0 32px rgba(0,0,0,0.08);
}

.login-card {
  width: 400px;
  border-radius: 16px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 1;
}

.card-header {
  text-align: center;
  padding: 20px 0;
}

:deep(.el-card__header) {
  padding: 0;
  border-bottom: none;
}

:deep(.el-tabs__nav) {
  width: 100%;
}

:deep(.el-tabs__item) {
  flex: 1;
  text-align: center;
  font-size: 16px;
  height: 50px;
  line-height: 50px;
}

:deep(.el-tabs__item.is-active) {
  color: #667eea;
  font-weight: 600;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 8px 12px;
}

:deep(.el-input__inner) {
  height: 40px;
}

:deep(.el-button) {
  height: 44px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

:deep(.el-form-item) {
  margin-bottom: 24px;
}

:deep(.el-icon) {
  font-size: 18px;
  color: #667eea;
}

@media (max-width: 900px) {
  .login-layout {
    flex-direction: column;
  }
  .login-bg {
    height: 200px;
    flex: none;
  }
  .login-form-area {
    flex: none;
    box-shadow: none;
  }
}
</style> 